<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/Synopsis' }"
            >关于协会</el-breadcrumb-item
          >
          <el-breadcrumb-item>协会简介</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 菜单栏 -->
        <div class="menu-box">
          <div class="menu-title">
            <img src="../../assets/icon.png" alt="" />
            <span>关于协会</span>
          </div>
          <div class="menu-item">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#FFFFFF"
              text-color="#666666"
              active-text-color="#0056A2"
              router
              :default-active="this.$router.path"
            >
              <el-menu-item index="/Synopsis">
                <img
                  src="../../assets/right-select.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">协会简介</span>
              </el-menu-item>
              <el-menu-item index="/Solution">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">协会章程</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <!-- 内容栏 -->
        <div class="content-box">
          <div class="content-title">协会简介</div>
          <el-divider></el-divider>
          <div>
            贵州省担保业协会前身为贵州省担保业联合会，于2005年3月29日成立。2011年7月28日，经省经济和信息化委员会《关于同意贵州省担保业联合会改组为贵州省担保业协会的批复》（黔经信交流[2011]20号）同意和省民政厅民间组织管理局核准，正式更名为贵州省担保业协会。目前共有会员单位81家，其中会长1家、副会长5家、秘书长1家、理事8家、监事1家、会员65家。
            贵州省担保业协会是由融资担保机构自愿组成的全省性担保行业自律组织，是非营利性社会团体法人。贵州省担保业协会接受社团登记管理机关贵州省民政厅的监督管理，指导单位为贵州省地方金融监督管理局。
            贵州省担保业协会的宗旨是，高举爱国主义、社会主义旗帜，坚持走中国特色社会主义道路，遵守国家法律法规，维护会员合法权益，规范行业行为，作好会员单位与政府的桥梁与纽带；以规范、自律、交流、促进、增信为会员共同愿望，为担保机构、协作银行及企业服务，为解决中小企业融资难服务。
            贵州省担保业协会的业务范围是：
            （一）受政府部门授权或委托，开展贵州省担保行业统计、调查、研究，结合实际向有关部门提出政策意见和建议；
            （二）宣传、贯彻国家及贵州省有关担保行业的方针、
            政策与法规，参与制定并实施地方性担保行规、行约和担保机构评级制度；
            （三）调查研究中小企业融资中的主要问题，组织担保行业理论与实务研究，组织研究成果的评审、推广与应用，向担保机构提出意见和建议；
            （四）在相关政府部门的委托、授权和指导下，组织专业培训，建立并实施与贵州省担保业现状和监管部门要求相适应的担保业务人员从业资格认证制度；
            （五）收集、整理担保行业信息和企业融资需求，定期向会员及有关单位发布，促进政府与会员之间的信息交流;
            （六）反映会员的要求和意见，协调会员的关系, 维护会员的合法权益；
            （七）为会员和企业提供行业信息、企业管理、专业技术及法律事务等咨询服务；
            （八）开展与省内外担保行业的合作交流；
            （九）承担政府部门授权或委托的其他有关工作。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Synopsis",
  data() {
    return {
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.content-body .menu-box {
  /* border: 1px solid #dcdadd; */
  flex: 1;
  border-radius: 5px;
  margin-right: 40px;
}

.content-body .content-box {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .content-box .content-title {
  font-size: 28px;
  font-family: Microsoft YaHei;
}

.menu-title {
  background-color: #0056a2;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.menu-title span {
  margin-left: 12px;
}

.menu-item {
  border: 1px solid #dcdadd;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
</style>